<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼图</title>
    <script src="js/d3.js" type="text/javascript"></script>
</head>
<body>
<svg width="960" height="600"></svg>
<script type="text/javascript">
    /*
    * d3.arc( {} )，弧形生成器
    * d3.pie()，饼状图生成器，用以产生绘制一个弧的必须的数据的对象，使用方式：d3.pie(data)
    * d3.arc().centroid()，圆心挖空率
    * d3.schemeCategory10，表示一些离散的色彩
    * */
/********************************************************************************************************************/
    //数据准备
    var marge={top:60,bottom:60,left:60,right:60};
    var svg=d3.select('svg');
    var width=svg.attr('width');
    var height=svg.attr('height');
    var g=svg.append('g')
        .attr('transform','translate('+marge.top+','+marge.left+')');
    var dataset=[30,10,43,55,13];//最终将这些数据画成饼图

    //设置一个颜色比例尺，为了让不同扇形呈现不同颜色
    var colorScale=d3.scaleOrdinal()
        .domain(d3.range(dataset.length))
        .range(d3.schemeCategory10);

    //新建一个饼图
    var pie=d3.pie();

    //新建一个弧形生成器
    var innerRadius =0;//内半径
    var outerRadius =100;//外半径
    var arc_generator=d3.arc()
        .innerRadius(0)
        .outerRadius(100);

    //利用饼图生成器转换数据
    //将原始数据变成可以绘制饼状图的数据，
    var pieData = pie(dataset);
    console.log(pieData)

    //开始绘制
    var gs=g.selectAll('.g')
        .data(pieData)
        .enter()
        .append('g')
        .attr("transform","translate("+width/2+","+height/2+")");//位置信息

    //绘制扇形
    gs.append('path')
        .attr('d',function(d){
            return arc_generator(d);//往弧形生成器输入数据
        })
        .attr('fill',function(d,i){
            return colorScale(i);
        });

    //绘制饼状图上面的文字信息
    gs.append("text")
        .attr("transform",function(d){//位置设在中心处
            return "translate("+arc_generator.centroid(d)+")";
        })
        .attr("text-anchor","middle")
        .text(function(d){
            return d.data;
        });
</script>
</body>
</html>
